<template>
    <div class="biaoxun">
        <div class="biaoxunZs">
            <span class="zhongshi"></span>
            <span class="biaoxunZt">筛选条件</span>
        </div>
        <div style="margin-top: 40px;">
            <div>
                <div class="biaoxunTou">产品关键词 </div>
                <div style="display: flex; align-items: center;">
                    <div>
                        <el-input class="lookSth" v-model="dataService.input1"
                            placeholder="输入产品(标的物)关键词查找联系人，多个用空格隔开" />
                    </div>
                </div>
            </div>
        </div>
        <div class="mt30">
            <div>公告类型</div>
            <div class="projectArea">
                <!-- , -->
                <span :class="{ 'shangActive': photo == item.value, 'shang': true }" v-for="item in opbulletin"
                    :key="item" @click="toggonggao(item)">{{ item.label
                    }}</span>
            </div>
            <div class="projectArea" v-if="opbullTwo.length > 0">
                <!--  -->
                <span :class="{ 'shangActive': dataService.bulletin.includes(items.value), 'shang': true }"
                    v-for="items in opbullTwo" :key="items" @click="twoSelection(items)">{{
                            items.label
                        }}</span>
            </div>
            <!-- <div class="mt10">
                    <el-checkbox-group v-model="dataService.bulletin">
                        <el-checkbox v-for="city in biddingBoos" :key="city" :label="city.id">{{
                            city.name
                        }}</el-checkbox>
                    </el-checkbox-group>
                </div> -->
        </div>
        <!-- <div style="margin-top: 40px;">
            <div>
                <div class="biaoxunTou">产品排除词 </div>
                <div style="display: flex; align-items: center;">
                    <div>
                        <el-input class="lookSth" v-model="dataService.input3" placeholder="请输入排除词，多个用空格隔开" />
                    </div>
                </div>
            </div>

        </div> -->
        <!-- <div style="margin-top: 40px;">
            <div>
                <div class="biaoxunTou">选择公司 </div>
                <div style="display: flex; align-items: center;">
                    <div>
                        <el-input class="lookSth" v-model="dataService.input2"
                            placeholder="请输入公司名称并从下拉列表中选择公司，查找公司联系人，多个用空格隔开" />
                    </div>
                </div>
            </div>

        </div> -->
        <div class="mt30">
            <div>联系人角色</div>
            <div class="mt10">
                <el-checkbox-group v-model="dataService.contact">
                    <el-checkbox v-for="city in contactBids" :key="city" :label="city.id">{{
                            city.name
                        }}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="mt30" style="padding-right: 15px;">
            <div>项目发布时间</div>
            <div class="mt10">
                <el-radio-group v-model="dataService.timesId">
                    <el-radio v-for="item in shortcuts" :key="city" :label="item.id" @change="radioChange(item.id)">{{
                            item.text
                        }}</el-radio>
                    <el-date-picker v-model="time" type="daterange" format="YYYY/MM/DD" value-format="x"
                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"
                        @change="timeChange" />
                </el-radio-group>
            </div>
        </div>
        <diqu ref="quangDq" />
        <div v-if="flg">

            <!-- <div class="mt30">
                <div>匹配模式</div>
                <div class="mt10">
                    <el-radio-group v-model="dataService.matching">
                        <el-radio v-for="item in quality" :key="city" :label="item.id">{{
                            item.name
                        }}</el-radio>
                    </el-radio-group>
                </div>
            </div> -->
        </div>
        <!-- <div class="greater" @click="greaterClick">
            <span style="margin-right: 10px;">{{ flg ? '收起更多' : '更多筛选' }} </span>
            <img v-if="flg" style="width: 8px; height: 12px;" src="@/assets/img/shouqi.png" alt="">
            <img v-else style="width: 8px; height: 12px;" src="@/assets/img/zhankai.png" alt="">
        </div> -->
    </div>
</template>

<script setup>
import diqu from '../diqu/index.vue'
import { reactive, ref, onMounted } from "vue";
import { useRadio1Store } from "@/pain/search/search";
import { getInfomationchild } from "@/Api/shoop/index.js";
const signalsRadio1 = useRadio1Store();
const quangDq = ref()
let time = ref([])

// let flg = ref(false)
// const greaterClick = () => {
//     flg.value = !flg.value
// }

let dataService = reactive({
    input1: '',
    // input2: '',
    dhly: [], // 联系人角色
    times: [
        {
            oneTime: '',
            twoTime: ''
        }
    ],
    contact:[],
    // 
    bulletin: [],
    // matching: ''
})
signalsRadio1.T_contacts = dataService

let opbulletin = ref([])
const getInfomationchilds = () => {
    getInfomationchild().then(res => {
        opbulletin.value = res.data.data
        console.log(res.data.data)
    })
}
let opbullTwo = ref([])
let photo = ref("");
let photoIndex = ref("");
const toggonggao = (data) => {
    photo.value = data.value;
    photoIndex.value = data.value;
    opbulletin.value.forEach(res => {
        if (res.label == data.label) {
            opbullTwo.value = res.children
            dataService.bulletin = []
        }
        console.log(res)
    })
}
const twoSelection = (data) => {
    dataService.bulletin.push(data.value)

}

// 时间
const shortcuts = [
    {
        id: '0',
        text: "全部",
    },
    {
        id: '1',
        text: "今天",
    },
    {
        id: '2',
        text: "昨天",
    },
    {
        id: '3',
        text: "近一周",
    },
    {
        id: '4',
        text: "近一个月",
    },
    {
        id: '5',
        text: "近三个月",
    },
    {
        id: '6',
        text: "近六个月",
    },
    {
        id: '7',
        text: "近一年",
    },
    {
        id: '8',
        text: "自定义",
    },
];
const timeChange = (value) => {
    const dateObject1 = new Date(value[0]);
    let seconds1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(value[1]);
    let seconds2 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times[0] = [
        {
            oneTime: seconds1,
            twoTime: seconds2
        }
    ]
}
const jintain = () => {
    const today = new Date();
    const start = new Date(today);
    start.setHours(0, 0, 0, 0); // 设置为当天的零点
    const end = new Date(today);
    end.setHours(23, 59, 59, 999); // 设置为当天的最后一刻

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}

const zuotain = () => {
    const today = new Date();
    const yesterday = new Date(today);
    yesterday.setDate(today.getDate() - 1); // 设置为昨天
    const start = new Date(yesterday);
    start.setHours(0, 0, 0, 0); // 设置为昨天的零点
    const end = new Date(yesterday);
    end.setHours(23, 59, 59, 999); // 设置为昨天的最后一刻

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}
const jinyizhou = () => {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}

const jinyiyue = () => {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}

const jinsanyue = () => {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}

const jinliuyue = () => {
    const end = new Date(); // 当前时间
    const start = new Date(); // 过去六个月的时间
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); // 90天前，即过去六个月

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}
const jinyinian = () => {
    const end = new Date(); // 当前时间
    const start = new Date(); // 近一年的时间
    start.setFullYear(end.getFullYear() - 1); // 设置起始日期为当前日期的前一年

    const dateObject1 = new Date(start);
    let start1 = Math.floor(dateObject1.getTime() / 1000);
    const dateObject2 = new Date(end);
    let end1 = Math.floor(dateObject2.getTime() / 1000);
    dataService.times = [
        {
            oneTime: start1,
            twoTime: end1
        }
    ]
}

const radioChange = (id) => {
    if (id == '1') {
        jintain()
    } else if (id == '2') {
        zuotain()
    } else if (id == '3') {
        jinyizhou()
    } else if (id == '4') {
        jinyiyue()
    } else if (id == '5') {
        jinsanyue()
    } else if (id == '6') {
        jinliuyue()
    } else if (id == '7') {
        jinyinian()
    } else if (id == '0') {
        dataService.times[0] = [
            {
                oneTime: 0,
                twoTime: 0
            }
        ]
    }
}

// 招标公司类型
let biddingBoos = ref([
    {
        id: "1",
        name: "国有企业",
    },
    {
        id: "2",
        name: "通讯运营商",
    },
    {
        id: "3",
        name: "军队",
    },
    {
        id: "4",
        name: "银行",
    },
    {
        id: "5",
        name: "证券",
    },
    {
        id: "6",
        name: "保险",
    },
    {
        id: "7",
        name: "民营企业",
    },
    {
        id: "8",
        name: "医院",
    },
    {
        id: "9",
        name: "政府及事业单位",
    },
    {
        id: "10",
        name: "学校",
    },
    {
        id: "11",
        name: "其他",
    },
]);

// 联系人
let contactBids = [
    {
        id: "1",
        name: "全部",
    },
    {
        id: "2",
        name: "招标联系人",
    },
    {
        id: "3",
        name: "中标联系人",
    },
    // {
    //     id: "4",
    //     name: "代理联系方式",
    // }

];

// 品配模式
let quality = [
    {
        id: "1",
        name: "智能",
    },
    {
        id: "2",
        name: "精准",
    },
    {
        id: "3",
        name: "模糊",
    },
];
const dataLxr = () => {
    dataService.input1 = ''

    dataService.input2 = ''
    dataService.bulletin = []
    dataService.contact = []
    dataService.times = [
        {
            oneTime: '',
            twoTime: ''
        }
    ],
        dataService.matching = ''
}
defineExpose({ dataLxr, dataService });
onMounted(() => {
    getInfomationchilds()
});
</script>

<style lang="scss" scoped>
.mt30 {
    margin-top: 30px;
}

.mt10 {
    margin-top: 10px;
}


.projectArea {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 1160px;
    border-bottom: 1px solid #DDDDDD;
}

.shang {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 24px;
    margin-right: 30px;
    margin-bottom: 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #333;
}

.shangActive {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    height: 24px;
    margin-right: 30px;
    margin-bottom: 20px;
    padding: 0 5px;
    background-color: #6675FF;
    font-size: 14px;
    border-radius: 4px;
    color: #FFFFFF;
}

.greater {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 84px;
    font-size: 14px;
    color: #6675FF;
}

.guanjianzi {
    max-width: 100px;
    margin-right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.biaoxun {
    padding: 20px 0 67px 20px;

    .biaoxunZs {
        display: flex;
        margin-bottom: 22px;

        .zhongshi {
            width: 4px;
            height: 16px;
            margin-right: 10px;
            background-color: #6675FF;
            border-radius: 10px;
        }

        .biaoxunZt {
            font-size: 16px;
            color: #333333;
        }
    }

    .biaoxunTou {
        margin-bottom: 15px;
        font-size: 14px;
        color: #333333;

        .biaoxunShu {
            margin-left: 10px;
            color: #6675FF;
        }
    }

    .lookSth {
        width: 500px;
        margin-right: 15px;
    }


}

.infOne {
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;

    .infOne_hove {
        display: flex;
        height: 40px;
        align-items: center;
        padding-left: 15px;

        &:hover {
            // background-color: #6675FF;
        }
    }
}

.search_money {
    display: flex;
    align-items: center;
    width: 150px;
    padding-left: 10px;

    .search_mput {
        width: 100px;
        height: 28px;
        line-height: 28px;
        padding: 0 15px;
        border-radius: 4px;
        border: 1px solid #9a9898;
        font-size: inherit;
        outline: none;
    }
}

.dropdownButtom {
    width: 200px;
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
    padding-right: 10px;
}

::v-deep .el-button {
    color: aliceblue;
}

::v-deep .el-dropdown-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 220px;
    height: 36px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 36px;
    border-radius: 4px;
    border: 1px solid #DDDDDD !important;
    font-size: 14px;
    color: #333333;
}

.el-radio-group {
    display: flex;
    flex-wrap: nowrap;
    font-size: 16px;
}
</style>